<template>
	<div class="selector"
	     :class="{'selector-has-label':label}">
		<div v-if="label"
		     class="selecor-label">
			<Icon v-if="labelIcon"
			      :type="labelIcon"></Icon>{{label}}</div>
		<Select-control v-model="value"
		                :filterable="true"
		                :initData="initDataSet"
		                :size="size"
		                ref="select"
		                :data="selectData"
		                :placeholder="placeholder"
		                @showList="selectOpen"
		                :disabled="disabled"
		                :loading="loading"
		                @clearSelect="clearSelect"
		                :transfer="transfer"
		                @toBottom="scrollToBottom"
		                :clearable="clearable"
		                @inputFocus="query($event,postData)">
		</Select-control>
	</div>
</template>
<script>
import SelectControl from '@/element/select/index';
import DataTable from 'mixins/table';
import $ from '@/common';

export default {
	mixins: [DataTable],
	props: {
		path: {},
		//标签文字
		label: {},
		labelIcon: {},
		placeholder: {},
		optionKey: {
			default: 'id',
		},
		//默认查询并选中第一个
		defaultSelect: {
			default: false,
		},
		filterable: {
			default: true,
		},
		size: {},
		clearable: {
			default: true,
		},
		renderTpl: {},
		optionCode: {
			default: 'name',
		},
		transfer: {
			default: false,
		},
		postData: {},
		disabled: {},
		hasSearch: {
			default: false,
		},
		rowData: {},
		initValue: {},
		data: {},
		cache: {
			default: false,
		},
		initData: {},
	},
	data() {
		return {
			initFetch: false,
			searchPath: this.path,
			createdFetch: false,
			value: this.initValue,
			hasData: false,
			appendData: true,
			//搜索不会阻止下一个请求的发送
			mulitQuery: true,
			selectedData: {},
			pageFetching: false,
		};
	},
	computed: {
		initDataSet() {
			if (this.initData) {
				if (!$.isArray(this.initData)) {
					return [this.initData];
				} else {
					return this.initData;
				}
			} else {
				return null;
			}
		},
		selectData() {
			var list = [];
			var data = this.tableData;
			for (let i in data) {
				let name = data[i][this.optionCode];
				if (this.renderTpl) {
					name = $.composeValue(this.renderTpl, data[i]);
				}
				list.push({
					id: data[i][this.optionKey].toString(),
					name,
				});
			}
			return list;
		},
	},
	watch: {
		value(v) {
			this.$emit('input', v === '' ? null : v);
			var dataRow = null;
			for (let i in this.tableData) {
				if (this.tableData[i][this.optionKey] === v) {
					dataRow = this.tableData[i];
					this.$emit('selectChange', this.tableData[i]);
					break;
				}
			}
			if (dataRow) {
				this.$set(this, 'selectedData', dataRow);
			}
			if (!v && v !== 0 && v !== this.value) {
				if (!(v === null && this.value === undefined) && !(v === undefined && this.value === null)) {
					this.$emit('selectChange', null);
				}
			}
		},
		initValue(v) {
			this.value = v;
		},
		path() {
			this.searchPath = this.path;
		},
	},
	methods: {
		clearSelect() {
			this.$emit('selectChange', null);
		},
		selectOpen() {
			this.filterKey = null;
			if ((this.hasData && this.cache) || !this.path) return;
			this.fetch(1, this.postData).then(() => {
				if (!this.fetchCheck()) return;
				this.hasData = true;
			});
		},
		fetchCheck() {
			return true;
		},
		scrollToBottom() {
			if (this.pageFetching) return;
			this.pageFetching = true;
			this.fetchNext(this.postData).finally(() => {
				this.pageFetching = false;
			});
		},
	},
	created() {
		if (this.data && this.data.length) {
			this.tableData = this.data;
		}
		if (this.defaultSelect) {
			this.initFetch = true;
			this.fetch(1, this.postData)
				.then(res => {
					if (this.tableData.length) {
						this.value = this.tableData[0][this.optionKey];
					}
				})
				.finally(() => {
					this.initFetch = false;
				});
		}
	},
	components: {
		SelectControl,
	},
};
</script>
<style lang="less">
.ivu-modal-body {
	.select-list {
		/*top: 0 !important*/
	}
	.ivu-select {
		position: relative;
	}
}
.selector-has-label {
	display: flex;
	width: 100%;
	.bk-select-selection {
		border-radius: 0 4px 4px 0;
	}
	.selecor-label {
		padding: 6px 12px;
		background-color: #eee;
		border: 1px solid #dddee1;
		border-top-left-radius: 4px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 4px;
		border-right: none;
		.ivu-icon {
			margin-right: 4px;
		}
	}
	.ivu-select {
		flex: 1;
		.ivu-select-selection {
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
		}
	}
}
</style>
